<template>
  <div class="com_contalner">
    <el-card class="box-card">
      <div class="card-header">退货商品</div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :cell-style="cellStyleFn"
        :header-cell-style="headerStyleFn"
      >
        <el-table-column label="商品图片" width="140">
          <template #default="scope">
            <img :src="scope.row.productPic" alt="" style="width: 80px" />
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="316">
          <template #default="scope">
            <p>{{ scope.row.productName }}</p>
            <p>品牌：{{ scope.row.productBrand }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="价格/货号">
          <template #default="scope">
            <p>价格： ¥{{ scope.row.productRealPrice }}</p>
            <p>货号:{{ "NO." + scope.row.productId }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="productAttr" label="属性" />
        <el-table-column prop="productCount" label="数量" width="80" />
        <el-table-column prop="address" label="小计" width="100">
          <template #default="scope">
            <p>{{ scope.row.productCount * scope.row.productRealPrice }}</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="total">
        合计: <span style="color: red">¥{{ total }}</span>
      </div>
    </el-card>
    <el-card class="box-card2 box-card">
      <div class="card-header">服务单信息</div>
      <div class="tabel">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">服务单号</el-col>
          <el-col :span="18" class="form-border">{{ obj.id }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">申请状态</el-col>
          <el-col :span="18" class="form-border">{{
            obj.status == 0
              ? "待处理"
              : obj.status == 1
              ? "退货中"
              : obj.status == 2
              ? "已完成"
              : "已拒绝"
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">订单编号</el-col>
          <el-col :span="18" class="form-border"
            >{{ obj.orderSn }}
            <span @click="onLook" class="look">查看</span></el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">申请时间</el-col>
          <el-col :span="18" class="form-border">{{
            dayjs(obj.createTime).format("YYYY-MM-DD HH:mm:ss")
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">用户账号</el-col>
          <el-col :span="18" class="form-border">{{
            obj.memberUsername
          }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">联系人</el-col>
          <el-col :span="18" class="form-border">{{ obj.returnName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">联系电话</el-col>
          <el-col :span="18" class="form-border">{{ obj.returnPhone }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">退货原因</el-col>
          <el-col :span="18" class="form-border">{{ obj.reason }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">问题描述</el-col>
          <el-col :span="18" class="form-border">{{ obj.description }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg last"
            >凭证图片</el-col
          >
          <el-col :span="18" class="form-border last">
            <img
              src="https://s..com/node-header-log"
              alt=""
              style="width: 80px; height: 80px"
            />
          </el-col>
        </el-row>
      </div>
      <div class="tabel">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">订单金额</el-col>
          <el-col :span="18" class="form-border">
            <span style="padding-right: 4px"> ¥ </span>
            {{ obj.productRealPrice }}</el-col
          >
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg"
            >确认退款金额</el-col
          >
          <el-col :span="18" class="form-border">
            <span style="padding-right: 8px"> ¥ </span>
            <el-input
              v-model="input"
              :disabled="obj.status == 0 ? false : true"
              style="width: 170px"
            />
          </el-col>
        </el-row>
        <div v-if="obj.status === 3 ? false : true">
          <el-row>
            <el-col :span="6" class="form-border form-left-bg"
              >选择收货点</el-col
            >
            <el-col :span="18" class="form-border">
              <el-select
                v-model="Selectvalue"
                :disabled="obj.status == 0 ? false : true"
                @change="onChange"
              >
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.addressName"
                  :value="item.id"
                />
              </el-select>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" class="form-border form-left-bg"
              >收货人姓名</el-col
            >
            <el-col :span="18" class="form-border">{{ obj.returnName }}</el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="form-border form-left-bg">所在区域</el-col>

            <el-col :span="18" class="form-border">
              <span
                v-if="
                  obj.companyAddress == null || obj.companyAddressId == null
                    ? false
                    : true
                "
              >
                {{ province }} {{ region }} {{ detailAddress }}</span
              >
              <span v-if="obj.status == 0"
                >{{ arr[0].province }} {{ arr[0].city }}
                {{ arr[0].region }}</span
              >
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="form-border form-left-bg">详细地址</el-col>
            <el-col :span="18" class="form-border">
              <span v-if="obj.status === 0">
                {{ arr[0]["detailAddress"] }}</span
              >
              <span>{{ city }}</span>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6" class="form-border form-left-bg">联系电话</el-col>
            <el-col :span="18" class="form-border">
              <span>{{ phone }}</span>
              <span v-if="obj.status === 0"> {{ arr[0]["phone"] }}</span>
            </el-col>
          </el-row>
        </div>
      </div>

      <div class="tabel" v-if="obj.status === 0 ? false : true">
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">处理人员</el-col>
          <el-col :span="18" class="form-border">{{ obj.handleMan }}</el-col>
        </el-row>

        <el-row>
          <el-col :span="6" class="form-border form-left-bg">处理时间</el-col>
          <el-col :span="18" class="form-border"
            >{{
              obj.handleTime
                ? dayjs(obj.handleTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">处理备注</el-col>
          <el-col :span="18" class="form-border">{{ obj.handleNote }}</el-col>
        </el-row>
      </div>

      <div class="tabel" v-if="obj.status === 3 ? false : true">
        <el-row v-if="obj.receiveMan">
          <el-col :span="6" class="form-border form-left-bg">收货人员</el-col>
          <el-col :span="18" class="form-border">{{ obj.receiveMan }}</el-col>
        </el-row>

        <el-row v-if="obj.receiveTime">
          <el-col :span="6" class="form-border form-left-bg">收货时间</el-col>
          <el-col :span="18" class="form-border"
            >{{
              obj.receiveTime
                ? dayjs(obj.receiveTime).format("YYYY-MM-DD HH:mm:ss")
                : ""
            }}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="form-border form-left-bg">收货备注</el-col>
          <el-col :span="18" class="form-border">
            <el-input
              v-model="receiveNoteval"
              style="width: 170px"
              v-if="
                (obj.receiveNote == null && obj.status == 1) || obj.status == 0
              "
            />
            <span v-else> {{ obj.receiveNote }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="buttonbox">
        <div
          style="text-align: center; margin-top: 20px"
          v-if="obj.status == 0 || obj.status == 1"
        >
          <el-button type="primary" @click="onConfirm"
            ><span>确认收货</span></el-button
          >
        </div>

        <div
          style="text-align: center; margin-top: 20px"
          v-if="obj.status == 0"
        >
          <el-button type="danger"><span>拒绝退货</span></el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, reactive, ref, type Ref } from "vue";

import dayjs from "dayjs"; // ES 2015
import * as api from "@/request/api";
import { useRoute, type LocationQueryValue } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message-box/style/css";
import "element-plus/es/components/message/style/css";
import { useRouter } from "vue-router";
let router = useRouter();

// 获取id
let route = useRoute();
let id: any = route.query.id;
let input = ref(0);
let receiveNoteval = ref("");
let Selectvalue = ref(1);
let onChangeVal = ref(1);

// 选择器
let options = ref([]);
let tableData = reactive([]);
let obj = ref({}) as any;
let total = ref(0);
let province = ref("");
let region = ref("");
let detailAddress = ref("");
let city = ref("");
let phone = ref(0);
let arr: any = ref([]);

let onChange = (val: number) => {
  onChangeVal.value = val;
  arr.value = options.value.filter((item) => {
    return item.id == val;
  });
};

async function getReturnApplyfn(value: any, onChangeVal: Ref<number>) {
  console.log(9632, onChangeVal.value);

  let res = await api.returnApply.getReturnApply(value);

  if (tableData.length > 0) {
    tableData = [];
  }
  tableData.push(res);
  let returnApply = await api.returnApply.getcompanyAddressList();
  options.value = returnApply;
  console.log(987, options.value);

  // 计算的方法
  total.value = tableData[0].productCount * tableData[0].productRealPrice;
  
  obj.value = JSON.parse(JSON.stringify(res));
  // obj.value = res;
  // 如果0就禁止
  input.value = obj.value.returnAmount == null ? 0 : obj.value.returnAmount;
  Selectvalue.value =
    obj.value.companyAddressId == null
      ? onChangeVal.value
      : obj.value.companyAddressId;

  province.value = obj.value.companyAddress?.province;
  region.value = obj.value.companyAddress?.city;
  detailAddress.value = obj.value.companyAddress?.region;
  city.value = obj.value.companyAddress?.detailAddress;
  phone.value = obj.value.companyAddress?.phone;
  console.log(onChangeVal.value);

  arr.value = options.value.filter((item) => {
    return item.id == onChangeVal.value;
  });
}

getReturnApplyfn(id, onChangeVal);

let cellStyleFn = () => {
  return {
    textAlign: "center",
  };
};
let headerStyleFn = () => {
  return {
    textAlign: "center",
  };
};

let onLook = () => {
  router.push({
    name: `orderDetail`,
    query: {
      id: obj.value.orderId,
    },
  });
};

let onConfirm = async () => {
  ElMessageBox.confirm("是否要提交修改?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    let res = await api.returnApply.returnApplyUpdate({
      companyAddressId: obj.value.companyAddressId || obj.value.id,
      handleMan: obj.value.handleMan,
      handleNote: obj.value.handleNote,
      id: obj.value.id,
      receiveMan: obj.value.receiveMan,
      receiveNote: obj.value.receiveNote,
      returnAmount: obj.value.returnAmount,
      status: obj.value.status,
    });
    console.log(res);

    ElMessage({
      type: "success",
      message: "提交成功!",
    });
    
  });
};
</script>

<style lang="scss" scoped>
.com_contalner {
  height: 100%;
  .box-card {
    width: 1038px;
    // height: 196px;
    margin: 20px auto;
    padding: 20px;
    .card-header {
      margin-bottom: 15px;
    }
  }
}

.total {
  text-align: right;
  margin-top: 20px;
}
.form-border {
  border-right: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 10px;
}

.form-left-bg {
  background: #f2f6fc;
}
.tabel {
  border: 1px solid #dcdfe6;
  font-size: 14px;
  margin-top: 15px;
  .last {
    height: 100px;
  }
}
.el-col {
  height: 50px;
  display: flex;
  align-items: center;
}
.look {
  color: #409eff;
  cursor: pointer;
}
.buttonbox {
  display: flex;
  justify-content: center;
  div:nth-child(1) {
    padding-right: 20px;
  }
}
</style>
